<template>
  <div class="submit">
      <MyHead title="发布" >
          <div class="tis" @click="gotopage('/myms')">
            <van-icon name="label-o" size="18" />
            <span>我的面试</span>
          </div>
      </MyHead>

      <div class="stpes">
        <van-steps :active="active">
          <van-step v-for="(item,index) in steps" :key="index" >{{ item.title }}</van-step>
        </van-steps>
      </div>
      <div class="form">
        <div class="form-box" v-if="active==0">
            <van-form ref="form">
              <van-field
                  v-model="form.title"
                  name="title"
                  label="面试标题"
                  placeholder="面试标题"
                  :rules="[{ required: true, message: '请填写' }]"
                  center
                  clearable
                  required
                />
                <van-field
                  v-model="form.campany"
                  name="campany"
                  label="面试公司"
                  placeholder="面试公司"
                  :rules="[{ required: true, message: '请填写' }]"
                  center
                  clearable
                  required
                />
                <van-field
                  v-model="form.address"
                  name="address"
                  label="面试地点"
                  placeholder="面试地点"
                  :rules="[{ required: true, message: '请填写' }]"
                  center
                  clearable
                  required
                />
                <van-field
                    readonly
                    clickable
                    name="date"
                    :value="form.date "
                    label="面试时间"
                    placeholder="面试时间"
                    @click="showPicker = true"
                    required
                    :rules="[{ required: true, message: '请选择' }]"
                  />
                  <!-- <van-popup v-model="showPicker" position="bottom">
                    <van-datetime-picker
                      type="datetime"
                      title="选择面试时间"
                      @confirm="onConfirm"
                      @cancel="showPicker = false"
                    />

                  </van-popup> -->
                  <van-field
                    readonly
                    clickable
                    name="level"
                    :value="form.level"
                    label="面试等级"
                    placeholder="面试等级"
                    @click="show = true"
                    required
                    :rules="[{ required: true, message: '请选择' }]"
                  />
                  <van-popup v-model="show" position="bottom">
                    <van-picker
                      show-toolbar
                      :columns="levels"
                      @confirm="onChooseLevel"
                      @cancel="show = false"
                      title="选择面试难度"
                    />
                  </van-popup>


                  <van-calendar title="选择面试时间" :min-date="minDate" v-model="showPicker" @confirm="onConfirm" />
            </van-form>
        </div>

        <div class="page-two" v-if="active==1">
           <div class="box1">
              <h2 class="title">1.面试属性(最多6个)</h2>
              <div class="tags mt10">
                <van-tag class="tag" @click="chooseOne(item,index)" :color="item.check?'orange':'#1989fa'" v-for="(item,index) in tagList" size="large" :key="index"  round type="primary">{{ item.label }}</van-tag>
              </div>
           </div>
           <div class="box1 mt10">
              <h2 class="title">2.面试图片(最多9张)</h2>
              <div class="mt10">
                <van-uploader @delete="deleteOne" v-model="fileList" :after-read="afterRead"    :max-count="9" />
              </div>
           </div>
           <div class="box1 mt10">
              <h2 class="title">3.面试录音(可以不传)</h2>
              <div class="mt10" v-if="audioSrc">
                <audio :src="audioSrc.replace(/public/,baseURL)"  controls   ></audio>
              </div>
              <UploadFile @getfilepath="getAudioPath">
                  <div class="mt10 " style="width:160px;">
                      <van-button type="warning" block round >上传面试录音 <van-icon name="back-top" /></van-button>
                  </div>
              </UploadFile>

           </div>
        </div>

        <div class="page-three" v-if="active==2">
          <div class="box1 mt10">
              <h2 class="title">1.面试问题</h2>

                <van-cell-group >
                  <van-cell :title="'第'+(index+1)+'题'" v-for="(item,index) in quesList" :key="index" icon="label-o" :value="item.value"      />
                </van-cell-group>
              <van-field
                v-model="ques"
                type="text"
                class="text"
                placeholder="请输入面试题目"

              />
              <div class=" mt10">
                  <van-button :disabled="!ques"  type="info" block round  @click="addToQuesList">发布面试题 <van-icon name="add-o" /> </van-button>
              </div>

           </div>
           <div class="box1 mt10">
              <h2 class="title">2.面试总结</h2>
              <div class=" mt10">
                <van-field
                  v-model="content"
                  rows="7"
                  autosize
                  type="textarea"
                  maxlength="400"
                  placeholder="用心书写面试心得"
                  show-word-limit
                  class="textarea"
                />
              </div>
           </div>
        </div>
      </div>
      <div class="btns">
          <van-button type="info" class="m10" v-if="active!=steps.length-1" @click="gotonext">下一步</van-button>
          <van-button type="primary" class="m10" v-if="active!=0" @click="gotoprev">上一步</van-button>
          <van-button type="warning" class="m10" v-if="active==steps.length-1" @click="todoAddMs">发布题目</van-button>

      </div>

  </div>
</template>

<script>
import { todouplodafile , todoaddmainshi  } from '@/api/api'
export default {
  data(){
    return {
      active:0,
      steps:[
        {title:'1.面试的公司信息'},
        {title:'2.面试的具体信息'},
        {title:'3.面试的最后总结'},
      ],
      form:{

      },
      minDate: new Date(2020, 0, 1),
      showPicker:false,
      show:false,
      fileList:[],
      imgs:[],
      audioSrc:"",
      tags:[],
      content:'',
      quesList:[],
      ques:''
    }
  },
  methods:{
    async todoAddMs(){
      if(this.quesList.length==0){
        this.ShowToast('请至少提交一个面试题目')
        return ;
      }
      if(this.content==''){
        this.ShowToast('请书写一下面试心得')
        return ;
      }
      let res = await todoaddmainshi({
         tags:this.tags,
         content:this.content,
         imgs:this.imgs,
         ...this.form,
         audioSrc:this.audioSrc,
         quesList:this.quesList,
         likes:0,
         collects:0,
         pings:0,
      })
      if(res.code==200){
        this.ShowSuccess('发布成功')
        this.gotopage('/myms')
      }
    },
    addToQuesList(){

      this.quesList.push({
        value:this.ques,
        label:'ques_'+this.quesList.length
      })
      this.ques = '';
    },
    getAudioPath(path){
      this.audioSrc = path;
    },
    deleteOne(file,payload){
        this.imgs.splice(payload.index,1);
    },
    async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
      let data = new FormData()
      data.append('file',file.file)
      let res = await todouplodafile(data)
      if(res.code==200){
        this.imgs.push({
          url:res.path,
        })
      }

    },
    chooseOne(item,index){

      if(this.tagList.filter(item=>item.check).length>5  && !item.check){
        this.ShowToast('最多选择6个')
        return false;
      }

      this.$set(this.tagList,index,{...item,check:!item.check})
    },
    onChooseLevel(value){
      this.show = false;
      this.$set(this.form,'level',value)
    },
    onConfirm(date){
      this.showPicker = false;
      this.$set(this.form,'date',this.formatDate(date))
    },
    gotonext(){
      // this.active+=1;
      if(this.active==0){
        this.$refs.form.validate()
        .then((valid)=>{
          console.log(this.form)
            this.active+=1;
        })
        .catch(err=>{
          this.ShowToast('请填写表单数据')
        })
      }else if(this.active==1){
        this.tags = this.tagList.filter(item=>item.check);
        if(this.tags.length==0){
          this.ShowToast('至少选择一个面试属性');
          return
        }
        if(this.imgs.length==0){
          this.ShowToast('至少选择一张面试图片');
          return
        }

        this.active+=1;
      }
    },
    gotoprev(){
      this.active-=1;
    }
  }
}
</script>

<style lang="scss" scoped>
.text{
  border:0.5px solid #ddd;
  border-radius: 10px;
  margin-top:10px;
}
.textarea{
  border:0.5px solid #ddd;
  border-radius: 10px;
}
.tag{
  margin:3px 3px 0 0 ;
}
.submit{
  width:100%;
  min-height: calc(100vh - 50px);
  position: relative;
  .form{
    margin-top:25px;
    padding:0 10px;

  }
  .btns{
    // position: absolute;
    // bottom:10px;
    // left:0;
    margin-top:40px;
    display: flex;
    justify-content: center;
    width:100%;
    .m10{
      margin:0 10px !important;
    }
  }
}
.tis{
  color:#1989fa;
  display: flex;
  align-items: center;
  justify-content: center;
  span{
    margin-top:3px;
  }
}
</style>
